class Banner2{
    constructor(){
        this.imgbox = document.querySelector(".banners");
        // this.babox = document.querySelector(".bannersbox");
        this.left = document.querySelector(".btns_left")
        this.right = document.querySelector(".btns_right")
        this.url = "http://localhost:3000/api";
        this.index = 0;
        this.getData();
        this.addEvent();
        this.autoPlay();
    }
    autoPlay(){
        const that = this;
        clearInterval(that.t)
        that.t = setInterval(()=>{
            this.changeIndex(1);
            // 鼠标移入停止
            this.imgbox.onmouseenter = function(){
                clearInterval(that.t);
            }
            // 鼠标移出继续
            this.imgbox.onmouseleave = function(){
                that.autoPlay();
            }
        }, 3000)
    }
    getData(){
        ajax({
            url:this.url,
            data:{
                type:"getBanner2"
            },
            success:res=>{
                res = JSON.parse(res);
                if(res.code === 1){
                    // 渲染页面
                    this.data = res.data
                    this.render();
                }
            }
        })
    }
    render(){
        let str = "";
        for(let i = 0;i<this.data.length;i++){
            str += `<li class="rainbow-item-1">
            <a class="thumb" href="" target="_blank">
                <img src="${this.data[i].src}">
            </a>
            <h3 class="title">
                <a href="https://www.leishen.cn/item/1123.html" target="_blank">${this.data[i].title}</a>
            </h3>
            <p class="desc">${this.data[i].alt}</p>
        </li>`
        }
        const first = this.data[0];
        str += `<li class="rainbow-item-1">
        <a class="thumb" href="" target="_blank">
            <img src="${first.src}">
        </a>
        <h3 class="title">
            <a href="https://www.leishen.cn/item/1123.html" target="_blank">${first.title}</a>
        </h3>
        <p class="desc">${first.alt}</p>
    </li>`
        this.imgbox.innerHTML = str;
        this.imgbox.style.width = this.imgbox.children.length * (this.imgbox.children[0].offsetWidth+10+"px") + "px"
    }
    addEvent(){
        const that = this;
        this.left.onclick = function (){
            that.changeIndex(0);
        }
        this.right.onclick = function (){
            that.changeIndex(1);
        }
    }
    changeIndex(d){
        if(d === 0){
            if(this.index === 0){
                this.index = this.imgbox.children.length-2;
                this.imgbox.style.left = -(this.imgbox.children.length - 1) * (this.imgbox.children[0].offsetWidth+10+"px") + "px";
            }else{
                this.index--
            }
        }else{
            if(this.index === this.imgbox.children.length - 1){
                this.index = 1;
                this.imgbox.style.left = 0;
            }else{
                this.index++
            }
        }
        this.move();
    }
    move(){
        move(this.imgbox,{
            left:this.index * (- this.imgbox.children[0].offsetWidth-10)
        });
    }
}
new Banner2();